<template>
  <div id="list">
    <div>
      <div class="widthDiv">
        <el-input
          size="small"
          v-model="pro"
          clearable
          placeholder="请输入查询省份"
        ></el-input>
      </div>
      <el-button
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="toSearch"
        >搜索</el-button
      >

      <el-button size="small" type="primary" @click="toReport">上报</el-button>
    </div>
    <el-table
      size="mini"
      :data="tableData"
      :default-sort="{ order: 'ascending' }"
      style="width: 100%"
    >
      <!-- <el-table-column prop="country" label="国"></el-table-column> -->
      <el-table-column
        label="序号"
        width="70px"
        sortable
        type="index"
      ></el-table-column>

      <el-table-column
        prop="province"
        label="省"
        width="130px"
      ></el-table-column>
      <el-table-column prop="city" label="市" width="130px"></el-table-column>
      <el-table-column prop="area" label="区" width="130px"></el-table-column>
      <el-table-column
        prop="confirmed"
        label="新增确诊"
        sortable
        width="100px"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="suspected"
        label="疑似"
        sortable
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column
        prop="dead"
        label="死亡"
        sortable
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column
        prop="cure"
        label="治愈"
        sortable
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column
        prop="severe"
        label="重症"
        sortable
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column
        prop="outside"
        label="境外输入"
        sortable
        width="100px"
        align="center"
      ></el-table-column>
      <el-table-column prop="inputTime" label="上报时间" sortable width="170px">
        <template slot-scope="scope">
          <span>{{
            moment(scope.row.inputTime).format("YYYY-MM-DD HH:mm:ss")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "../../utils/request";
let moment = require("moment");
export default {
  data() {
    return {
      pro: "",
      tableData: [],
      pageParam: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  computed: {},
  methods: {
    moment,
    async dataPlay() {
      let res = await axios.get("/epidemic/pageQuery", {
        params: {
          page: 1,
          pageSize: 20,
        },
      });
      this.tableData = res.data.list;
    },

    toReport() {
      this.$router.push({
        path: "/Up",
      });
    },
    toSearch() {
      axios
        .get("/epidemic/pageQuery", {
          params: {
            page: 1,
            pageSize: 20,
            province: this.pro,
          },
        })
        //页面渲染
        .then((res) => {
          this.tableData = res.data.list;
        });
    },
    handleDelete(id) {
      // 要删除的医院的ID
      // await等待后面异步函数运行完毕 拿到响应的数据 然后返回
      alert(id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res;
          if (id) {
            res = await axios.get("/epidemic/deleteById", {
              params: { id },
            });
          }
          this.$notify({
            title: res.status == 200 ? "成功" : "失败",
            message: res.statusText,
            type: (res.status = 200 ? "success" : "error"),
          });
          this.pageQuery();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  created() {
    this.dataPlay();
  },
  mounted() {},
};
</script>
<style  scoped>
.widthDiv {
  width: 800px;
  display: inline-block;
  /* margin-right: 20px; */
  /* margin-bottom: 10px; */
}
</style>